'use strict';

define(function(require,exports,module){
	var React = require('reactAddons');
	var $ = require('jquery');
	var jPages = require('jPages');

	/*DATE下拉框*/
	var SelectOptionDate = require('components/partial/SelectOptionDate');

	var publicObj = require('lib/public');

    //Pager
    var Pager = require('components/partial/Pager');

    module.exports = React.createClass({

		handleDateChange:function(event){
			var date = event.target.value;
			this.loadData(date);
			this.setState({date:date});
		},
		getInitialState:function(){
			return {
				data:[],
				data_sum:0,
                page:1,
                pre_stop:true,
                next_stop:false
			};
		},
        loadDataSum:function(){
            var token = publicObj.get_token();
            var sql = "select count(*) as sum from qeeniao.sys_sql_whitelist";
            var data = new Object();
            data.sql = sql;
            data.access_token = token;

            $.ajax({
                url:this.props.url,
                data:data,
                type:'post',
                dataType:'json',
                success:function(o){
                    if(this.isMounted()){
                        this.setState({'data_sum':o[0].sum});
                    }
                }.bind(this),
                error:function(xhr,status,err){
                    console.error('获取数据失败!',status,err.toString());
                }.bind(this)
            })
        },
        listData:function(p){
            this.setState({'data_list':[]});
            var token = publicObj.get_token();

            p = parseInt(p);
            var page = p - 1;
            page = page > 0 ? page : 0;
            var pagesize = 10;
            var limit = " limit "+(page * pagesize)+","+pagesize+" ";

            var data = new Object();
            data.sql = "select *" +
                "from qeeniao.sys_sql_whitelist " +
                "order by autokid DESC "+limit;
            data.access_token = token;

            $.ajax({
                url:this.props.url,
                data:data,
                type:'post',
                dataType:'json',
                success:function(o){
                    if(this.isMounted()) {
                        this.setState({'data': o});

                        if (o.length < pagesize) {
                            this.setState({'next_stop': true});
                        } else {
                            this.setState({'next_stop': false});
                        }

                        if ((p - 1) <= 0) {
                            this.setState({'pre_stop': true});
                        } else {
                            this.setState({'pre_stop': false});
                        }

                        this.setState({page: p});
                    }

                }.bind(this),
                error:function(xhr,status,err){
                    console.error('获取数据失败!',status,err.toString());
                }.bind(this)
            })
        },
        componentDidMount:function(){
            this.listData(1);
            this.loadDataSum();
        },
		componentDidUpdate:function(){

		},

		render:function(){
			var data_list = this.state.data.map(function(i){
				return (
					<tr>
						<td>{i.autokid}</td>
						<td>{i.template}</td>
					</tr>

				)
			});

            var pager_props = {
                page : this.state.page,
                pre_stop:this.state.pre_stop,
                next_stop:this.state.next_stop,
                listData : this.listData
            };

			return (
				<div className="panel panel-default" style={{marginTop:10+'px'}}>
					<div className="panel-heading">
						<div className="row panel-title">
							<div className="col-xs-12">
								<h4 className="">
									{this.props.title} :
									<span className="red">{this.state.data_sum}个</span>

								</h4>
							</div>
						</div>

					</div>
					<div className="panel-body">
						<table className="table table-striped table-bordered table-hover">
							<thead>
							<tr>
								<th>ID号</th>
								<th>Template</th>
							</tr>
							</thead>
							<tbody id="itemContainer">
							{data_list}
							</tbody>
						</table>
					</div>
					<div className="panel-body">
                        <Pager {...pager_props}/>
					</div>
				</div>
			);
		}
	});
});